﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>冒泡推送 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#toasts" class="nav-link font-weight-bold"><span>Toasts</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#overview" class="nav-link"><span>概述</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#toast-features-and-notes" class="nav-link"><span>Toast 特点和注意事项</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#toasts-on-demand" class="nav-link"><span>Toasts 需求</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#options" class="nav-link"><span>Options</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#title" class="nav-link"><span>标题</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#transparency" class="nav-link"><span>透明度</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#variants" class="nav-link"><span>Variants</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#toaster-target" class="nav-link"><span>Toaster 目标</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#prepend-and-append" class="nav-link"><span>前置和附加</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#auto-hide" class="nav-link"><span>自动隐藏</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#toast-roles" class="nav-link"><span>Toast 角色</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#links" class="nav-link"><span>链接</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#b-toast-component" class="nav-link"><span>&lt;b-toast&gt; 组成部分</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#slots" class="nav-link"><span>插槽</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#b-toaster-target-component" class="nav-link"><span>&lt;b-toaster&gt; 目标组件</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#advanced-usage" class="nav-link"><span>高级使用</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#alerts-versus-toasts" class="nav-link"><span>Alerts versus toasts</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#accessibility" class="nav-link"><span>辅助功能</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#accessibility-tips" class="nav-link"><span>辅助功能提示</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#internet-explorer-screen-reader-support" class="nav-link"><span>Internet Explorer屏幕阅读器支持</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-toast" class="nav-link"><span>&lt;b-toast&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-toaster" class="nav-link"><span>&lt;b-toaster&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">冒泡推送</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">冒泡推送(Toasts)</h1>
  <p class="bd-lead">使用 <code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code> 、 <code translate="no" class="notranslate text-nowrap">&lt;b-toaster&gt;</code>组件，可轻松便利推送通知给访客，快速生成警报信息。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>






<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#overview" class=""><span data-v-811345e6="">Overview</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#toast-features-and-notes" class=""><span data-v-811345e6="">Toast features and notes</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#toasts-on-demand" class=""><span data-v-811345e6="">Toasts on demand</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#options" class=""><span data-v-811345e6="">Options</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#title" class=""><span data-v-811345e6="">Title</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#transparency" class=""><span data-v-811345e6="">Transparency</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#variants" class=""><span data-v-811345e6="">Variants</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#toaster-target" class=""><span data-v-811345e6="">Toaster target</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#prepend-and-append" class=""><span data-v-811345e6="">Prepend and append</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#auto-hide" class=""><span data-v-811345e6="">Auto-hide</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#toast-roles" class=""><span data-v-811345e6="">Toast roles</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#links" class=""><span data-v-811345e6="">Links</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#b-toast-component" class=""><span data-v-811345e6="">&lt;b-toast&gt; component</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#slots" class=""><span data-v-811345e6="">插槽</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#b-toaster-target-component" class=""><span data-v-811345e6="">&lt;b-toaster&gt; target component</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#advanced-usage" class=""><span data-v-811345e6="">Advanced usage</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#alerts-versus-toasts" class=""><span data-v-811345e6="">Alerts versus toasts</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span data-v-811345e6="">Accessibility</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility-tips" class=""><span data-v-811345e6="">Accessibility tips</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#internet-explorer-screen-reader-support" class=""><span data-v-811345e6="">Internet Explorer screen reader support</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">组件引用</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-toast" class=""><span data-v-811345e6="">&lt;b-toast&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-toaster" class=""><span data-v-811345e6="">&lt;b-toaster&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">导入单个组件</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</nav>
<p>
  Toast是一种轻量级通知,一般是已被推送的通知，通过移动和桌面操作系统普及。
</p>
<p>
  Toasts 会对访问者或用户造成小干扰，因此应该尽量少包含非交互式内容。有关<strong>重要的</strong>使用信息，请参阅下面的<a href="#accessibility-tips" class="font-weight-bold">Accessibility tips</a>部分。
</p>
<h2 id="overview" class="bv-no-focus-ring"><span class="bd-content-title">Overview<a class="anchorjs-link" href="#overview" aria-labelledby="overview"></a></span></h2>
<p>
  为了促进可扩展和可预测的toast，我们建议提供一个header（title）和body。Toast头使用<code translate="no" class="notranslate text-nowrap">'display: flex'</code>样式，由于Bootstrap的<a href="../../../bootstrap-vue/docs/reference/utility-classes" class="font-weight-bold">margin and flexbox utility classes</a>，允许轻松对齐内容。 
</p>
<p>
  Toasts有点半透明，它们融合了所有可能出现的东西。对于支持<code translate="no" class="notranslate text-nowrap">backdrop-filter</code> CSS属性的浏览器，它们还将尝试模糊Toast下的元素。
 </p>
<div translate="translate" class="bd-example vue-example vue-example-toast-intro notranslate">
<div class="p-3 bg-secondary progress-bar-striped" style="min-height: 170px;">
<button type="button" class="btn mb-2 btn-primary"> Show toast </button>
<div id="example-toast__toast_outer" role="alert" aria-live="assertive" aria-atomic="true" class="b-toast b-toast-prepend">
<div tabindex="0" id="example-toast" class="toast">
<header class="toast-header"><strong class="mr-2">BootstrapVue</strong>
<button type="button" aria-label="Close" class="close ml-auto mb-1">×</button>
</header>
<div class="toast-body"> Hello, world! This is a toast message. </div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"p-3 bg-secondary progress-bar-striped"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"min-height: 170px;"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"$bvToast.show('example-toast')"</span>&gt;</span>
      Show toast
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-toast</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-toast"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"BootstrapVue"</span> <span class="hljs-attr">static</span> <span class="hljs-attr">no-auto-hide</span>&gt;</span>
      Hello, world! This is a toast message.
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-toast</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<p><strong>注意:</strong> 
  我们在上面的示例中使用了静态道具，以在文档中显示toast的进度，而不是将其传输到<code translate="no" class="notranslate text-nowrap">&lt;b-toaster&gt;</code>目标容器。 并且，我们在外部<code translate="no" class="notranslate text-nowrap">&lt;div&gt;</code>中添加了<code translate="no" class="notranslate text-nowrap">bg-secondary</code>类和<code translate="no" class="notranslate text-nowrap">progress-bar-striped</code>类，仅用于说明toast透明度。
</p>
<h3 id="toast-features-and-notes" class="bv-no-focus-ring"><span class="bd-content-title">Toast 功能和注意事项<a class="anchorjs-link" href="#toast-features-and-notes" aria-labelledby="toast-features-and-notes"></a></span></h3>
<ul>
<li>
  可以通过注入<code translate="no" class="notranslate text-nowrap">this.$bvToast</code>对象按需生成toast，也可以使用<code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>组件手动创建。
</li>
<li>
  标题是可选的，但应该包括在内，标题会显示在<code translate="no" class="notranslate text-nowrap">&lt;strong&gt;</code>元素内，除非使用<code translate="no" class="notranslate text-nowrap">toast-title</code>插槽
</li>
<li>
  Toast右上方的关闭按钮可以通过无关闭按钮<code translate="no" class="notranslate text-nowrap">no-close-button</code>道具移除。
</li>
<li>
  将显示标题栏，除非您不指定标题并设置无关闭按钮<code translate="no" class="notranslate text-nowrap">no-close-button</code>道具。
</li>
<li>
  自动隐藏会在5000毫秒后发生，可以通过自动隐藏延迟<code translate="no" class="notranslate text-nowrap">auto-hide-delay</code>道具进行更改，或通过不自动隐藏<code translate="no" class="notranslate text-nowrap">no-auto-hide</code>道具禁用。
</li>
<li>
  启用自动隐藏后，当您将鼠标悬停在toast上，自动隐藏倒计时将暂停。您可通过将<code translate="no" class="notranslate text-nowrap">no-hover-pause</code>属性设置为<code translate="no" class="notranslate text-nowrap">true</code>来禁用此功能。
</li>
<li>
  如果禁用自动隐藏功能，请避免隐藏关闭按钮，或者如果隐藏关闭按钮，请确保允许toast自动关闭。 有关<strong>重要的</strong> 使用信息，请参阅下面的<a href="#accessibility-tips" class="font-weight-bold">Accessibility tips</a>部分。
</li>
<li>
  可以通过将<code translate="no" class="notranslate text-nowrap">solid  prop</code>设置为<code translate="no" class="notranslate text-nowrap">true</code>来禁用toast透明度。
</li>
<li>
  Toast将显示在名为<code translate="no" class="notranslate text-nowrap">&lt;b-toaster&gt;</code>的目标组件内部。 BootstrapVue带有几个预定义的toaster。 toaster在显示之前，将在文档中检查命名的toaster，如果找不到，将动态创建命名的toaster目标。
  </li>
<li>
  Toaster目标完全由CSS定义，用于控制包含的<code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code> 组件的位置。
</li>
<li>Toasts可以针对任何命名的toaster。</li>
<li>
  Toasts包装在带有<code translate="no" class="notranslate text-nowrap">b-toast</code> 的<code translate="no" class="notranslate text-nowrap">&lt;div&gt;</code>中，以便在toaster组件中显示时支持Vue列表转换。
  </li>
</ul>
<p>
  BootstrapVue使用<a href="https://portal-vue.linusb.org/" target="_blank" rel="noopener">PortalVue</a>将toasts传送到toasters中。
</p>
<h2 id="toasts-on-demand" class="bv-no-focus-ring"><span class="bd-content-title">Toasts 需求<a class="anchorjs-link" href="#toasts-on-demand" aria-labelledby="toasts-on-demand"></a></span></h2>
<p>
  通过<code translate="no" class="notranslate text-nowrap">this.$bvToast.toast()</code>Vue组件实例注入从应用程序中的任何位置生成动态toast，而无需在应用程序中放置<a href="#b-toast-component" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code></a>组件。
</p>
<p>
  使用<code translate="no" class="notranslate text-nowrap">this.$bvToast.toast()</code>方法生成toasts。该方法接受两个参数：
</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">message</code>:
  toast主体的内容（字符串或<code translate="no" class="notranslate text-nowrap">VNodes</code>数组）。必填的。将不会显示带有空消息的Toasts。有关将<code translate="no" class="notranslate text-nowrap">VNodes</code>数组作为消息传递的示例，请参阅<a href="#advanced-usage" class="font-weight-bold">Advanced usage</a>部分。
</li>
<li><code translate="no" class="notranslate text-nowrap">options</code>: 
  用于提供标题和/或附加配置选项的可选选项对象。<code translate="no" class="notranslate text-nowrap">title</code>选项可以是字符串或<code translate="no" class="notranslate text-nowrap">VNodes</code>数组
</li>
</ul>
<p>
  options参数接受<code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>组件以camelCase name格式而不是kebab case格式接受的大多数道具（<code translate="no" class="notranslate text-nowrap">static</code>和<code translate="no" class="notranslate text-nowrap">visible</code>的除外）。
</p>
<div translate="translate" class="bd-example vue-example vue-example-toasts-bv-toast-example notranslate">
<div>
<button type="button" class="btn btn-secondary">Show Toast</button>
<button type="button" class="btn btn-secondary">Show Toast (appended)</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"makeToast()"</span>&gt;</span>Show Toast<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"makeToast(true)"</span>&gt;</span>Show Toast (appended)<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">toastCount</span>: <span class="hljs-number">0</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      makeToast(append = <span class="hljs-literal">false</span>) {
        <span class="hljs-keyword">this</span>.toastCount++
        <span class="hljs-keyword">this</span>.$bvToast.toast(<span class="hljs-string">`This is toast number <span class="hljs-subst">${<span class="hljs-keyword">this</span>.toastCount}</span>`</span>, {
          <span class="hljs-attr">title</span>: <span class="hljs-string">'BootstrapVue Toast'</span>,
          <span class="hljs-attr">autoHideDelay</span>: <span class="hljs-number">5000</span>,
          <span class="hljs-attr">appendToast</span>: append
        })
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  一旦使用<code translate="no" class="notranslate text-nowrap">this.$bvToast.toast()</code>生成的toast被隐藏，它将被自动销毁并从文档中删除。
</p>
<p><strong>Notes:</strong></p>
<ul>
<li>
  只有在使用完整的<code translate="no" class="notranslate text-nowrap">BootstrapVue</code>插件或<code translate="no" class="notranslate text-nowrap">ToastPlugin</code>插件时，<code translate="no" class="notranslate text-nowrap">this.$bvToast</code>注入才可用。如果只导入<code translate="no" class="notranslate text-nowrap">b-toast</code>或<code translate="no" class="notranslate text-nowrap">b-toaster</code>组件，则此选项不可用。要导入<code translate="no" class="notranslate text-nowrap">$bvToast</code>注入，请使用<code translate="no" class="notranslate text-nowrap">BVToastPlugin</code>插件。
</li>
<li>
  为每个Vue虚拟机实例（即每个实例化的组件）创建一个新的<code translate="no" class="notranslate text-nowrap">$bvToast</code>注入(mixin),不能通过直接访问<code translate="no" class="notranslate text-nowrap">Vue.prototype</code>来使用，因为它需要访问实例的<code translate="no" class="notranslate text-nowrap">this</code>和<code translate="no" class="notranslate text-nowrap">$root</code>上下文。
</li>
<li>
  通过this生成的<code translate="no" class="notranslate text-nowrap">this.$bvToast.toast()</code>是调用<code translate="no" class="notranslate text-nowrap">this.$bvToast.toast()</code>方法的Vue实例的子级，如果该Vue实例（即您的组件或应用程序）也被销毁，则该实例将被隐藏并销毁。如果vm上下文位于<code translate="no" class="notranslate text-nowrap">&lt;router-view&gt;</code>中，并且<code translate="no" class="notranslate text-nowrap">$route</code>发生更改，toast也将被销毁（因为<code translate="no" class="notranslate text-nowrap">&lt;router-view&gt;</code>的所有子节点都被销毁）。若要使按需烤面包机在路由器<code translate="no" class="notranslate text-nowrap">$route</code>更改之间保持不变，请使用此<code translate="no" class="notranslate text-nowrap">this.$root.$bvToast.toast()</code>将烤面包的父级设置为应用程序的根。
</li>
<li>Toasts需要消息。带有空消息的Toasts将不会显示。</li>
</ul>
<h2 id="options" class="bv-no-focus-ring"><span class="bd-content-title">Options 选项<a class="anchorjs-link" href="#options" aria-labelledby="options"></a></span></h2>
<p>
  Toasts有多种选择，可以控制他们的风格和行为。选项既可用作<code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>组件的道具，也可用作传递给<code translate="no" class="notranslate text-nowrap">this.$bvToast.toast()</code>的Options对象的属性。将选项传递到<code translate="no" class="notranslate text-nowrap">this.$bvToast.toast()</code>时,请使用组件属性名称的<samp class="notranslate" translate="no">camelCase</samp>版本，即使用<code translate="no" class="notranslate text-nowrap">noAutoHide</code>而不是
  <code translate="no" class="notranslate text-nowrap">no-auto-hide</code>。
</p>
<h3 id="title" class="bv-no-focus-ring"><span class="bd-content-title">Title 标题<a class="anchorjs-link" href="#title" aria-labelledby="title"></a></span></h3>
<p>
  通过title选项为您的toast添加标题<code translate="no" class="notranslate text-nowrap">title</code>。就像toast消息<code translate="no" class="notranslate text-nowrap">message</code>一样，标题可以是一个简单的字符串，也可以是一个<code translate="no" class="notranslate text-nowrap">VNodes</code>数组。有关将vnode数组作为消息和标题传递的示例，请参见<a href="#advanced-usage" class="font-weight-bold">Advanced usage</a>部分。
</p>
<h3 id="transparency" class="bv-no-focus-ring"><span class="bd-content-title">Transparency 透明度<a class="anchorjs-link" href="#transparency" aria-labelledby="transparency"></a></span></h3>
<p>
  默认情况下，Toasts的背景是半透明的。若要禁用默认透明度，只需将<code translate="no" class="notranslate text-nowrap">solid</code>属性设置为<code translate="no" class="notranslate text-nowrap">true</code>即可从背景色中移除alpha通道。
</p>
<p>
  使用SCSS文件而不是CSS文件时，还可以通过BootstrapVue自定义SCSS变量<code translate="no" class="notranslate text-nowrap">$b-toast-background-opacity</code>更改透明度。请参阅<a href="../../../bootstrap-vue/docs/reference/theming" class="font-weight-bold">Theming</a>参考部分。
</p>
<h3 id="variants" class="bv-no-focus-ring"><span class="bd-content-title">Variants<a class="anchorjs-link" href="#variants" aria-labelledby="variants"></a></span></h3>
<p>
  BootstrapVue toasts提供自定义CSS来定义颜色变量。变量遵循标准引导v4变量名。如果您有自定义的SCSS定义的引导颜色主题变量，toast自定义SCSS将自动为您创建toast变量（请参阅<a href="../../../bootstrap-vue/docs/reference/theming" class="font-weight-bold">Theming</a>参考部分）。
</p>
<div translate="translate" class="bd-example vue-example vue-example-toast-variants notranslate">
<div>
<button type="button" class="btn mb-2 btn-secondary">Default</button>
<button type="button" class="btn mb-2 btn-primary">Primary</button>
<button type="button" class="btn mb-2 btn-secondary">Secondary</button>
<button type="button" class="btn mb-2 btn-danger">Danger</button>
<button type="button" class="btn mb-2 btn-warning">Warning</button>
<button type="button" class="btn mb-2 btn-success">Success</button>
<button type="button" class="btn mb-2 btn-info">Info</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"makeToast()"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>Default<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"makeToast('primary')"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>Primary<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"secondary"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"makeToast('secondary')"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>Secondary<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"makeToast('danger')"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>Danger<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"warning"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"makeToast('warning')"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>Warning<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"makeToast('success')"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>Success<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"info"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"makeToast('info')"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>Info<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">methods</span>: {
      makeToast(variant = <span class="hljs-literal">null</span>) {
        <span class="hljs-keyword">this</span>.$bvToast.toast(<span class="hljs-string">'Toast body content'</span>, {
          <span class="hljs-attr">title</span>: <span class="hljs-string">`Variant <span class="hljs-subst">${variant || <span class="hljs-string">'default'</span>}</span>`</span>,
          <span class="hljs-attr">variant</span>: variant,
          <span class="hljs-attr">solid</span>: <span class="hljs-literal">true</span>
        })
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="toaster-target" class="bv-no-focus-ring"><span class="bd-content-title">Toaster target<a class="anchorjs-link" href="#toaster-target" aria-labelledby="toaster-target"></a></span></h3>
<p>BootstrapVue带有以下“内置”toaster名称（以及在SCSS中定义的相关样式）：</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-top-right</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-top-left</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-top-center</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-top-full</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-bottom-right</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-bottom-left</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-bottom-center</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-bottom-full</code></li>
</ul>
<div translate="translate" class="bd-example vue-example vue-example-toast-targets notranslate">
<div>
<button type="button" class="btn mb-2 btn-secondary">b-toaster-top-right</button>
<button type="button" class="btn mb-2 btn-secondary">b-toaster-top-left</button>
<button type="button" class="btn mb-2 btn-secondary">b-toaster-top-center</button>
<button type="button" class="btn mb-2 btn-secondary">b-toaster-top-full</button>
<button type="button" class="btn mb-2 btn-secondary">b-toaster-bottom-right</button>
<button type="button" class="btn mb-2 btn-secondary">b-toaster-bottom-left</button>
<button type="button" class="btn mb-2 btn-secondary">b-toaster-bottom-center</button>
<button type="button" class="btn mb-2 btn-secondary">b-toaster-bottom-full</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toast('b-toaster-top-right')"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>b-toaster-top-right<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toast('b-toaster-top-left')"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>b-toaster-top-left<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toast('b-toaster-top-center')"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>b-toaster-top-center<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toast('b-toaster-top-full')"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>b-toaster-top-full<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toast('b-toaster-bottom-right', true)"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>b-toaster-bottom-right<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toast('b-toaster-bottom-left', true)"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>b-toaster-bottom-left<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toast('b-toaster-bottom-center', true)"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>b-toaster-bottom-center<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toast('b-toaster-bottom-full', true)"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>b-toaster-bottom-full<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">counter</span>: <span class="hljs-number">0</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      toast(toaster, append = <span class="hljs-literal">false</span>) {
        <span class="hljs-keyword">this</span>.counter++
        <span class="hljs-keyword">this</span>.$bvToast.toast(<span class="hljs-string">`Toast <span class="hljs-subst">${<span class="hljs-keyword">this</span>.counter}</span> body content`</span>, {
          <span class="hljs-attr">title</span>: <span class="hljs-string">`Toaster <span class="hljs-subst">${toaster}</span>`</span>,
          <span class="hljs-attr">toaster</span>: toaster,
          <span class="hljs-attr">solid</span>: <span class="hljs-literal">true</span>,
          <span class="hljs-attr">appendToast</span>: append
        })
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p><strong>Notes:</strong></p>
<ul>
<li>
  未在CSS中定义的Toaster目标名称将呈现在文档的底部，堆叠且不定位（附加到a<code translate="no" class="notranslate text-nowrap">&lt;b-toaster&gt;</code>中的<code translate="no" class="notranslate text-nowrap">&lt;body&gt;</code>，类名和ID设置为Toaster目标名称）。toaster唯一的默认样式是<code translate="no" class="notranslate text-nowrap">z-index </code><code translate="no" class="notranslate text-nowrap">1100</code>。
</li>
<li>
  避免在应用程序中同时使用<code translate="no" class="notranslate text-nowrap">b-toaster-top-*</code>toasters或<code translate="no" class="notranslate text-nowrap">b-toaster-bottom-*</code>toasters，因为小屏幕（i.e. <code translate="no" class="notranslate text-nowrap">xs</code>）上的通知可能会被遮挡/重叠。
</li>
</ul>
<h3 id="prepend-and-append" class="bv-no-focus-ring"><span class="bd-content-title">Prepend and append 前置和附加<a class="anchorjs-link" href="#prepend-and-append" aria-labelledby="prepend-and-append"></a></span></h3>
<p>
  Toasts默认按创建顺序将自己放置在指定Toasts中显示的Toasts顶部。要在底部附加新的toast，请将<code translate="no" class="notranslate text-nowrap">append-toast</code>属性设置为<code translate="no" class="notranslate text-nowrap">true</code>。
</p>
<h3 id="auto-hide" class="bv-no-focus-ring"><span class="bd-content-title">Auto-hide 自动隐藏<a class="anchorjs-link" href="#auto-hide" aria-labelledby="auto-hide"></a></span></h3>
<p>
  通过自动隐藏延迟属性（值以毫秒为单位）更改为 <code translate="no" class="notranslate text-nowrap">自动隐藏延迟</code>时间，默认值为<code translate="no" class="notranslate text-nowrap">5000</code>（最小值<code translate="no" class="notranslate text-nowrap">1000</code>）。或者，通过将<code translate="no" class="notranslate text-nowrap">no-auto-hide</code> prop设置为<code translate="no" class="notranslate text-nowrap">true</code>，完全禁用自动隐藏功能。
</p>
<p>
  启用自动隐藏后，将鼠标悬停在toast上将暂停自动隐藏计时器。 当您取消悬停toast时，自动隐藏计时器将恢复。 您可以通过将<code translate="no" class="notranslate text-nowrap">no-hover-pause</code>属性设置为<code translate="no" class="notranslate text-nowrap">true</code>来禁用此功能。
</p>
<h3 id="toast-roles" class="bv-no-focus-ring"><span class="bd-content-title">Toast roles 角色<a class="anchorjs-link" href="#toast-roles" aria-labelledby="toast-roles"></a></span></h3>
<p>
  Toasts的默认<code translate="no" class="notranslate text-nowrap">role</code>属性为<code translate="no" class="notranslate text-nowrap">'alert'</code>，而<code translate="no" class="notranslate text-nowrap">aria-live</code>属性为<code translate="no" class="notranslate text-nowrap">'assertive'</code>。 对于需要临时通知的toasts，将<code translate="no" class="notranslate text-nowrap">is-status</code>道具设置为<code translate="no" class="notranslate text-nowrap">true</code>，这将分别将<code translate="no" class="notranslate text-nowrap">role</code>和<code translate="no" class="notranslate text-nowrap">aria-live</code>属性分别更改为 <code translate="no" class="notranslate text-nowrap">'status'</code>和<code translate="no" class="notranslate text-nowrap">'polite'</code>。
</p>
<p>
  有关详细信息，请参阅下面的<a href="#accessibility" class="font-weight-bold">Accessibility</a>部分。
</p>
<h3 id="links" class="bv-no-focus-ring"><span class="bd-content-title">Links 链接<a class="anchorjs-link" href="#links" aria-labelledby="links"></a></span></h3>
<p>
  可选地分别通过href和to props将toast主体转换为链接（<code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code>）或<code translate="no" class="notranslate text-nowrap">&lt;router-link&gt;</code> （或<code translate="no" class="notranslate text-nowrap">&lt;nuxt-link&gt;</code>）。设置好后，整个toast体就变成了一个链接。
</p>
<div translate="translate" class="bd-example vue-example vue-example-toast-link notranslate">
<div>
<button type="button" class="btn btn-secondary">Toast with link</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"toast()"</span>&gt;</span>Toast with link<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">methods</span>: {
      toast() {
        <span class="hljs-keyword">this</span>.$bvToast.toast(<span class="hljs-string">`Toast with action link`</span>, {
          <span class="hljs-attr">href</span>: <span class="hljs-string">'#foo'</span>,
          <span class="hljs-attr">title</span>: <span class="hljs-string">'Example'</span>
        })
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="b-toast-component" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code> component 部件<a class="anchorjs-link" href="#b-toast-component" aria-labelledby="b-toast-component"></a></span></h2>
<p>
  如果有一个自定义组件希望一次只显示一个toast，请使用<code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>组件。<code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>组件可以放置在自定义组件或应用程序中的任何位置，并且不呈现元素（它们呈现不会影响布局的注释占位符节点）。
</p>
<p>
  toast可以通过<code translate="no" class="notranslate text-nowrap">v-model</code>（绑定到<code translate="no" class="notranslate text-nowrap">visible</code> prop）显示，或者使用组件的<code translate="no" class="notranslate text-nowrap">show()</code>和<code translate="no" class="notranslate text-nowrap">hide()</code>实例方法显示，或者通过<code translate="no" class="notranslate text-nowrap">this.$bvToast.show(id)</code>和<code translate="no" class="notranslate text-nowrap">this.$bvToast.hide(id)</code>方法显示（要求在<code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>组件上设置唯一的id）。
</p>
<p>
  默认情况下，Toasts将进入<code translate="no" class="notranslate text-nowrap">b-toaster-top-right</code><code translate="no" class="notranslate text-nowrap">&lt;b-toaster&gt;</code>组件。如果文档中不存在由<code translate="no" class="notranslate text-nowrap">toaster</code>属性指定的toaster，则会根据需要创建该toaster。
</p>
<p>
  通过将<code translate="no" class="notranslate text-nowrap">static</code> prop设置为<code translate="no" class="notranslate text-nowrap">true</code>，可以强制<code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>在文档中的适当位置出现。您仍然需要显示和隐藏toast，但它不会被传送到toaster中。
</p>
<div translate="translate" class="bd-example vue-example vue-example-toast-component notranslate">
<div>
<button type="button" class="btn btn-secondary">Show toast</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"$bvToast.show('my-toast')"</span>&gt;</span>Show toast<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-toast</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"my-toast"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"warning"</span> <span class="hljs-attr">solid</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:toast-title</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex flex-grow-1 align-items-baseline"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-img</span> <span class="hljs-attr">blank</span> <span class="hljs-attr">blank-color</span>=<span class="hljs-string">"#ff5555"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mr-2"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"12"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"12"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-img</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mr-auto"</span>&gt;</span>Notice!<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted mr-2"</span>&gt;</span>42 seconds ago<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      This is the content of the toast.
      It is short and to the point.
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-toast</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
<h3 id="slots" class="bv-no-focus-ring"><span class="bd-content-title">插槽<a class="anchorjs-link" href="#slots" aria-labelledby="slots"></a></span></h3>
<ul>
<li><code translate="no" class="notranslate text-nowrap">toast-title</code>: 替换默认标题元素的内容。</li>
<li><code translate="no" class="notranslate text-nowrap">default</code>: toast的内容</li>
</ul>
<p>两个插槽的作用域可选为以下作用域:</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>Method or property 方法或性质</th>
<th>Description 说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">hide()</code></td>
<td>被调用时隐藏吐司，如果您提供自己的关闭按钮，效果会很不错。</td>
</tr>
</tbody>
</table>
</div>
<p>
  只有在使用<code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>组件时，插槽才可用。
</p>
<h2 id="b-toaster-target-component" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">&lt;b-toaster&gt;</code> target component 目标组件<a class="anchorjs-link" href="#b-toaster-target-component" aria-labelledby="b-toaster-target-component"></a></span></h2>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-toaster&gt;</code>组件提供了一个将出现toasts的容器（Toaster）。Toaster需要一个唯一的名称，Toaster可以出现在一个特定的命名Toaster。
</p>
<p>
  在大多数情况下，您不需要直接使用此组件，因为如果在文档中找不到所需的烤面包机名称，则<code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>将自动插入一个<code translate="no" class="notranslate text-nowrap">&lt;b-toaster&gt;</code>组件（附加到<code translate="no" class="notranslate text-nowrap">&lt;body&gt;</code>）。但有时你可能想明确地在你的应用中放置一个toaster。
</p>
<p>
  Toaster <code translate="no" class="notranslate text-nowrap">name</code>将成为插入容器的ID，并将在呈现的toaster容器上使用类名。
</p>
<p>
  Toaster的定位和Toaster内部的定位完全由CSS类（基于Toaster的名称）驱动。
</p>
<p>
  BootstrapVue的自定义scs中定义了以下“内置”toaster名称（以及相关样式）：
</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-top-right</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-top-left</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-top-center</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-top-full</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-bottom-right</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-bottom-left</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-bottom-center</code></li>
<li><code translate="no" class="notranslate text-nowrap">b-toaster-bottom-full</code></li>
</ul>
<p>
  上面的toasters将toasts以堆叠（柱形）的形式放置，固定在视口中（这意味着无论视口滚动位置如何，它们都将始终在视图中）。如果有超过视窗屏幕所能容纳的toasts，一些toasts将被视为隐藏在屏幕外，直到其他toasts被关闭/隐藏。
</p>
<p>
  <code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>默认使用<code translate="no" class="notranslate text-nowrap">b-toaster-top-right</code>toaster。
</p>
<p><strong>Notes:</strong></p>
<ul>
<li>
  如果文档中已存在同名的<code translate="no" class="notranslate text-nowrap">&lt;b-toaster&gt;</code>（由<code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>、<code translate="no" class="notranslate text-nowrap">this.$bvToast.toast()</code>自动创建或手动放置），则<code translate="no" class="notranslate text-nowrap">&lt;b-toaster&gt;</code>将只呈现空的<code translate="no" class="notranslate text-nowrap">&lt;div&gt;</code>元素并发出控制台警告。
</li>
<li>
  如果手动放置一个<code translate="no" class="notranslate text-nowrap">&lt;b-toaster&gt;</code>组件，请确保它作为最后一个元素放置在app根元素的底部，以便应用程序中的所有页面都可以使用它。
</li>
<li>
  如果显示针对Toasters名称的新Toasters，则会自动重新创建被销毁的Toasters。
</li>
<li>
  在大多数用例中，您不需要在应用程序中手动放置/创建<code translate="no" class="notranslate text-nowrap">&lt;b-toaster&gt;</code>组件，因为它们将根据需要自动生成。但如果需要覆盖任何toaster默认设置，请确保将应用程序中的toaster放置在不会因路由更改而被破坏的位置。
</li>
</ul>
<h2 id="advanced-usage" class="bv-no-focus-ring"><span class="bd-content-title">Advanced usage 高级使用<a class="anchorjs-link" href="#advanced-usage" aria-labelledby="advanced-usage"></a></span></h2>
<p>
  当使用<code translate="no" class="notranslate text-nowrap">this.$bvToast.toast(...)</code>方法生成toast时，您可能希望toast内容不仅仅是一个字符串消息。<a href="#toasts-on-demand" class="font-weight-bold">如上所诉</a>，您可以将<code translate="no" class="notranslate text-nowrap">VNodes</code>数组作为消息和标题传递给更复杂的内容。
</p>
<p>
  切记toast的内容要简明扼要。避免将交互组件或元素放置在toasts中，因为这可能会给辅助技术的用户带来问题。请参阅下面的<a href="#accessibility" class="font-weight-bold">无障碍</a>部分。
</p>
<p>
  下面是使用Vue的<a href="https://vuejs.org/v2/guide/render-function.html#The-Virtual-DOM" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">this.$createElement()</code></a>方法生成更复杂的toast内容的示例：
</p>
<div translate="translate" class="bd-example vue-example vue-example-toasts-advanced notranslate">
<div>
<button type="button" class="btn btn-secondary">Show Toast with custom content</button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"popToast"</span>&gt;</span>Show Toast with custom content<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">count</span>: <span class="hljs-number">0</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      popToast() {
        <span class="hljs-comment">// Use a shorter name for this.$createElement</span>
        <span class="hljs-keyword">const</span> h = <span class="hljs-keyword">this</span>.$createElement
        <span class="hljs-comment">// Increment the toast count</span>
        <span class="hljs-keyword">this</span>.count++
        <span class="hljs-comment">// Create the message</span>
        <span class="hljs-keyword">const</span> vNodesMsg = h(
          <span class="hljs-string">'p'</span>,
          { <span class="hljs-attr">class</span>: [<span class="hljs-string">'text-center'</span>, <span class="hljs-string">'mb-0'</span>] },
          [
            h(<span class="hljs-string">'b-spinner'</span>, { <span class="hljs-attr">props</span>: { <span class="hljs-attr">type</span>: <span class="hljs-string">'grow'</span>, <span class="hljs-attr">small</span>: <span class="hljs-literal">true</span> } }),
            <span class="hljs-string">' Flashy '</span>,
            h(<span class="hljs-string">'strong'</span>, <span class="hljs-string">'toast'</span>),
            <span class="hljs-string">` message #<span class="hljs-subst">${<span class="hljs-keyword">this</span>.count}</span> `</span>,
            h(<span class="hljs-string">'b-spinner'</span>, { <span class="hljs-attr">props</span>: { <span class="hljs-attr">type</span>: <span class="hljs-string">'grow'</span>, <span class="hljs-attr">small</span>: <span class="hljs-literal">true</span> } })
          ]
        )
        <span class="hljs-comment">// Create the title</span>
        <span class="hljs-keyword">const</span> vNodesTitle = h(
          <span class="hljs-string">'div'</span>,
          { <span class="hljs-attr">class</span>: [<span class="hljs-string">'d-flex'</span>, <span class="hljs-string">'flex-grow-1'</span>, <span class="hljs-string">'align-items-baseline'</span>, <span class="hljs-string">'mr-2'</span>] },
          [
            h(<span class="hljs-string">'strong'</span>, { <span class="hljs-attr">class</span>: <span class="hljs-string">'mr-2'</span> }, <span class="hljs-string">'The Title'</span>),
            h(<span class="hljs-string">'small'</span>, { <span class="hljs-attr">class</span>: <span class="hljs-string">'ml-auto text-italics'</span> }, <span class="hljs-string">'5 minutes ago'</span>)
          ]
        )
        <span class="hljs-comment">// Pass the VNodes as an array for message and title</span>
        <span class="hljs-keyword">this</span>.$bvToast.toast([vNodesMsg], {
          <span class="hljs-attr">title</span>: [vNodesTitle],
          <span class="hljs-attr">solid</span>: <span class="hljs-literal">true</span>,
          <span class="hljs-attr">variant</span>: <span class="hljs-string">'info'</span>
        })
      }
    }
 }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="alerts-versus-toasts" class="bv-no-focus-ring"><span class="bd-content-title">Alerts versus toasts<a class="anchorjs-link" href="#alerts-versus-toasts" aria-labelledby="alerts-versus-toasts"></a></span></h2>
<p>
  在某些情况下，您可能只需要一个简单的警报样式消息（即cookie使用通知等）。在这些情况下，通过在<a href="../../../bootstrap-vue/docs/components/alert" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-alert&gt;</code></a>组件上应用一些引导 <a href="../../../bootstrap-vue/docs/reference/utility-classes" class="font-weight-bold">使用程序类</a>和少量自定义样式，通常最好使用固定位置警报而不是toast：
</p>
<div translate="translate" class="bd-example vue-example vue-example-fixed-position-alerts notranslate">
<div>
<button type="button" class="btn btn-secondary btn-sm"> Show Fixed bottom Alert </button>
<button type="button" class="btn btn-secondary btn-sm"> Show Fixed top Alert </button>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"showBottom = !showBottom"</span>&gt;</span>
      {{ showBottom ? 'Hide' : 'Show' }} Fixed bottom Alert
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-alert</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"showBottom"</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"position-fixed fixed-bottom m-0 rounded-0"</span>
      <span class="hljs-attr">style</span>=<span class="hljs-string">"z-index: 2000;"</span>
      <span class="hljs-attr">variant</span>=<span class="hljs-string">"warning"</span>
      <span class="hljs-attr">dismissible</span>
    &gt;</span>
      Fixed position (bottom) alert!
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-alert</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"showTop = !showTop"</span>&gt;</span>
      {{ showTop ? 'Hide' : 'Show' }} Fixed top Alert
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-alert</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"showTop"</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"position-fixed fixed-top m-0 rounded-0"</span>
      <span class="hljs-attr">style</span>=<span class="hljs-string">"z-index: 2000;"</span>
      <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>
      <span class="hljs-attr">dismissible</span>
    &gt;</span>
      Fixed position (top) alert!
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-alert</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  data() {
    <span class="hljs-keyword">return</span> {
      <span class="hljs-attr">showBottom</span>: <span class="hljs-literal">false</span>,
      <span class="hljs-attr">showTop</span>: <span class="hljs-literal">false</span>
    }
  }
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>
  我们使用类位置固定来设置用户视窗内的<code translate="no" class="notranslate text-nowrap">固定位置</code>，并且类<code translate="no" class="notranslate text-nowrap">固定底部</code>
  或<code translate="no" class="notranslate text-nowrap">固定顶部</code>来将警报定位在视窗的底部或顶部。类<code translate="no" class="notranslate text-nowrap">m-0</code>删除警报周围的默认边距，<code translate="no" class="notranslate text-nowrap">rounded-0</code>删除默认圆角。我们还将<code translate="no" class="notranslate text-nowrap">z-index</code>设置为一个大值，以确保警报出现在页面上的任何其他内容上（<code translate="no" class="notranslate text-nowrap">fixed-top</code>和<code translate="no" class="notranslate text-nowrap">fixed-bottom</code>的默认值是<code translate="no" class="notranslate text-nowrap">1030</code>）。您可能需要为您的特定布局调整<code translate="no" class="notranslate text-nowrap">z-index</code>。
</p>
<p>
  由于警报标记保留在放置<code translate="no" class="notranslate text-nowrap">&lt;b-alert&gt;</code>组件的DOM中，因此屏幕阅读器和仅使用键盘的用户可以轻松访问其标签序列（用于访问关闭按钮）。
</p>
<h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">Accessibility<a class="anchorjs-link" href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
<p>
  Toasts是为了给你的访客或用户带来<strong>小小的干扰</strong>，所以为了帮助那些有屏幕阅读器和类似辅助技术的用户，祝酒被包裹在一个aria live区域中。对活动区域的更改（例如注入/更新toast组件）由屏幕阅读器自动宣布，而无需移动用户的焦点或以其他方式中断用户。此外，<code translate="no" class="notranslate text-nowrap">aria-atomic="true"</code>被自动设置为确保整个toast始终作为单个（原子）单元宣布，而不是宣布更改的内容（如果您只更新toast的部分内容，或者在稍后的时间点显示相同的toast内容，则可能导致问题）。
</p>
<p>
  如果您只需要在用户窗口的底部或顶部显示一条简单消息，请使用<a href="#alerts-versus-toasts" class="font-weight-bold">固定位置 <code translate="no" class="notranslate text-nowrap">&lt;b-alert&gt;</code></a>。
</p>
<h3 id="accessibility-tips" class="bv-no-focus-ring"><span class="bd-content-title">Accessibility tips<a class="anchorjs-link" href="#accessibility-tips" aria-labelledby="accessibility-tips"></a></span></h3>
<p>
  通常，toast消息应该显示一行或两行<strong >不需要</strong>用户交互的非关键消息。如果不采取额外的措施，toasts会有许多无障碍问题，可能会产生影响。下面的列表虽然不完整，但提供了使用toasts时的一般指南。
</p>
<ul>
<li>
  如果所需信息对流程很重要，例如表单中的错误列表，则使用<a href="../../../bootstrap-vue/docs/components/alert" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-alert&gt;</code></a>组件而不是<code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>。
</li>
<li>
  <code translate="no" class="notranslate text-nowrap">&lt;b-toast&gt;</code>默认情况下，将attributes <code translate="no" class="notranslate text-nowrap">role</code>设置为<code translate="no" class="notranslate text-nowrap">'alert'</code>，将<code translate="no" class="notranslate text-nowrap">aria-live</code>设置为<code translate="no" class="notranslate text-nowrap">'assertive'</code>。如果是错误之类的重要消息，则此默认设置是适当的，否则将prop <code translate="no" class="notranslate text-nowrap">is-status</code>设置为<code translate="no" class="notranslate text-nowrap">true</code>，这会将attributes <code translate="no" class="notranslate text-nowrap">role</code>更改为<code translate="no" class="notranslate text-nowrap">'status'</code>，<code translate="no" class="notranslate text-nowrap">aria-live</code>更改为<code translate="no" class="notranslate text-nowrap">'polite'</code>。
</li>
<li>
  避免在页面加载时弹出toast消息。在页面加载时执行意外操作对于屏幕阅读器用户来说非常混乱。如果在页面加载或路由更改时需要toast，请延迟几秒钟显示toast，以便屏幕阅读器在toast不中断的情况下完成当前页面的信息发布。
</li>
<li>
  将prop <code translate="no" class="notranslate text-nowrap">no-auto-hide</code>设置为<code translate="no" class="notranslate text-nowrap">true</code>时，必须有一个“关闭”按钮，以允许用户解除toast。如果您还将prop <code translate="no" class="notranslate text-nowrap">no-close-button</code>设置为<code translate="no" class="notranslate text-nowrap">true</code>，则必须提供自己的close按钮或通过其他方式解除toast。Toasts的标签索引为<code translate="no" class="notranslate text-nowrap">0</code>，因此只能由键盘用户访问。
</li>
<li>
  避免快速连续地启动许多toast，因为屏幕阅读器可能会中断当前祝酒词的阅读并宣布新的toast，从而导致错过上一个toast的上下文。
</li>
<li>
  对于文本内容较长的toast，请将<code translate="no" class="notranslate text-nowrap">自动隐藏延迟</code>调整为较大的超时，以便用户有时间阅读toast的内容。一个很好的保持信息的时间长度是4秒加上每100个单词额外1秒，四舍五入。这大概是普通人阅读的速度。这意味着作为最佳实践应该使用的最短默认值是5秒（5000ms）。除了一个合理的默认超时之外，您还可以允许用户选择他们希望toast的时间。大多数人天生就知道自己是快读者还是慢读者。如果用户登录时有一个配置文件设置，则当消息消失得太快时，慢速读卡器可以选择更长的时间，而当消息停留得太久时，快速读卡器可以选择较短的时间。
</li>
<li>
  为了解释记忆丧失、注意力分散以及与丢失相关的问题，例如ADHD，最佳实践是实现一个位置，用户可以在该位置引用已显示的过去祝酒词消息列表。最好这个列表应该是可排序的，默认是按时间顺序排列的。
</li>
</ul>
<h3 id="internet-explorer-screen-reader-support" class="bv-no-focus-ring"><span class="bd-content-title">Internet Explorer screen reader support 屏幕阅读器支持<a class="anchorjs-link" href="#internet-explorer-screen-reader-support" aria-labelledby="internet-explorer-screen-reader-support"></a></span></h3>
<p>
  不幸的是，IE 11在与<a href="https://github.com/nvaccess/nvda" target="_blank" rel="noopener">NVDA</a>或<a href="http://www.freedomscientific.com/products/software/jaws/" target="_blank" rel="noopener">JAWS</a>屏幕阅读器一起使用时，出现时不会正确地宣布/语音toast。如果使用IE 11的用户群很大，则可能需要为IE 11浏览器（在页面加载时创建）创建一个附加的屏幕外<code translate="no" class="notranslate text-nowrap">aria-live</code>区域，其中除了显示toast外，还动态放置toast消息文本的副本。
</p>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/toast#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-toast" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-toast&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/toast#comp-ref-b-toast" class="anchorjs-link" aria-labelledby="comp-ref-b-toast" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/toast/toast.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-toast-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-toast&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-toast-v-model"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-toast&gt;</code> v-model </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-toast-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-toast&gt;</code> 插槽 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-toast-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-toast&gt;</code> 事件 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-toast-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/toast#comp-ref-b-toast-props" class="anchorjs-link" aria-labelledby="comp-ref-b-toast-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1947">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__1947__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="title" class="" id="__BVID__1947__row_title">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">title</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">toast的标题文本</td>
</tr>
<tr role="row" data-pk="toaster" class="" id="__BVID__1947__row_toaster">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">toaster</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'b-toaster-top-right'</code></td>
<td aria-colindex="4" role="cell" class="">要在其中呈现toast的toaster目标的名称</td>
</tr>
<tr role="row" data-pk="visible" class="" id="__BVID__1947__row_visible">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">visible</code> <span data-v-866a22e8="" class="badge badge-primary">v-model</span></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">如果是真的，显示toast</td>
</tr>
<tr role="row" data-pk="variant" class="" id="__BVID__1947__row_variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">variant</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将一个引导主题颜色变体应用于组件</td>
</tr>
<tr role="row" data-pk="is-status" class="" id="__BVID__1947__row_is-status">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">is-status</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  当设置为“true”时，使toast具有aria live=polite和role=status。当“false”aria live变为“assertive”时，role变为“alert”
</td>
</tr>
<tr role="row" data-pk="append-toast" class="" id="__BVID__1947__row_append-toast">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">append-toast</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">如果为true，则toast将附加到可见的toast的底部，否则将预先准备好</td>
</tr>
<tr role="row" data-pk="no-auto-hide" class="" id="__BVID__1947__row_no-auto-hide">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-auto-hide</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将禁止toast自动解除其自身</td>
</tr>
<tr role="row" data-pk="auto-hide-delay" class="" id="__BVID__1947__row_auto-hide-delay">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">auto-hide-delay</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">5000</code></td>
<td aria-colindex="4" role="cell" class="">toast自动解除其自身之前的毫秒数</td>
</tr>
<tr role="row" data-pk="no-close-button" class="" id="__BVID__1947__row_no-close-button">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-close-button</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，隐藏toast标题中的“关闭”按钮</td>
</tr>
<tr role="row" data-pk="no-fade" class="" id="__BVID__1947__row_no-fade">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-fade</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">当设置为“true”时，禁用组件上的淡入动画/过渡</td>
</tr>
<tr role="row" data-pk="no-hover-pause" class="" id="__BVID__1947__row_no-hover-pause">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-hover-pause</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，当鼠标悬停toast时禁用自动隐藏延迟的暂停</td>
</tr>
<tr role="row" data-pk="solid" class="" id="__BVID__1947__row_solid">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">solid</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，使用纯色背景而不是半透明背景渲染toast</td>
</tr>
<tr role="row" data-pk="toast-class" class="" id="__BVID__1947__row_toast-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">toast-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Object or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要添加到toast包装器元素的CSS类</td>
</tr>
<tr role="row" data-pk="header-class" class="" id="__BVID__1947__row_header-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">header-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Object or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">添加到toast header元素的CSS类</td>
</tr>
<tr role="row" data-pk="body-class" class="" id="__BVID__1947__row_body-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">body-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Object or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">添加到toast body元素的CSS类</td>
</tr>
<tr role="row" data-pk="href" class="" id="__BVID__1947__row_href">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">href</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">表示标准a链接的链接的目标URL</td>
</tr>
<tr role="row" data-pk="to" class="" id="__BVID__1947__row_to">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">to</code></td>
<td aria-colindex="2" role="cell" class="">String or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">路由器链接属性：表示链接的目标路由。单击时，to prop的值将在内部传递给router.push（），因此该值可以是字符串或位置描述符对象</td>
</tr>
<tr role="row" data-pk="static" class="" id="__BVID__1947__row_static">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">static</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在DOM中就地呈现组件的内容，而不是将其移植到body元素中</td>
</tr>
</tbody>
</table>
</div>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small">
  <code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-toast&gt;</code>支持生成<code data-v-866a22e8="" translate="translate" class="notranslate">&lt;router-link&gt;</code>或<code data-v-866a22e8="" translate="translate" class="notranslate">&lt;nuxt-link&gt;</code>组件（如果使用nuxt.js）。有关路由器链接（或nuxt链接）特定属性的更多详细信息，请参阅<a data-v-866a22e8="" href="../../../bootstrap-vue/docs/reference/router-links" class="alert-link" target="_self">路由器支持</a>参考部分。
</p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-toast-v-model" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> v-model <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/toast#comp-ref-b-toast-v-model" class="anchorjs-link" aria-labelledby="comp-ref-b-toast-v-model" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__1978">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">事件</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">visible</code></td>
<td aria-colindex="2" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">change</code></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-toast-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/toast#comp-ref-b-toast-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-toast-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1987">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">范围</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="toast-title" class="" id="__BVID__1987__row_toast-title">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">toast-title</code></td>
<td aria-colindex="2" role="cell" class="">Toast标题，可选范围</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
<tr role="row" data-pk="default" class="" id="__BVID__1987__row_default">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">default</code></td>
<td aria-colindex="2" role="cell" class="">Toast身体内容物。可选范围。事件。</td>
<td aria-colindex="3" role="cell" class=""><button data-v-866a22e8="" type="button" class="btn py-0 btn-info btn-sm"> Scope </button></td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-toast-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/toast#comp-ref-b-toast-events" class="anchorjs-link" aria-labelledby="comp-ref-b-toast-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1998">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="change" class="" id="__BVID__1998__row_change">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">change</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">visible</code> - <span data-v-866a22e8="">true if toast is visible, false otherwise.</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">Toast可见性状态。用于更新v模型。</td>
</tr>
<tr role="row" data-pk="show" class="" id="__BVID__1998__row_show">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">show</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvt</code> - <span data-v-866a22e8="">BvEvent object.</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">总是在toast前发出。</td>
</tr>
<tr role="row" data-pk="shown" class="" id="__BVID__1998__row_shown">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">shown</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvt</code> - <span data-v-866a22e8="">BvEvent object.</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">toast时总是发出。</td>
</tr>
<tr role="row" data-pk="hide" class="" id="__BVID__1998__row_hide">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">hide</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvt</code> - <span data-v-866a22e8="">BvEvent object.</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">总是在toast隐藏起来之前发出。</td>
</tr>
<tr role="row" data-pk="hidden" class="" id="__BVID__1998__row_hidden">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">hidden</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">bvEvt</code> - <span data-v-866a22e8="">BvEvent object.</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">toast被藏起来后总是发出</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-toaster" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-toaster&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/toast#comp-ref-b-toaster" class="anchorjs-link" aria-labelledby="comp-ref-b-toaster" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/toast/toaster.js" class="btn btn-outline-secondary btn-sm"> View source </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-toaster-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-toaster&gt;</code> Properties </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-toaster-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/toast#comp-ref-b-toaster-props" class="anchorjs-link" aria-labelledby="comp-ref-b-toaster-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2016">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">Type</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">Default</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">Description</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="name" class="" id="__BVID__2016__row_name">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">name</code> <span data-v-866a22e8="" class="badge badge-info">Required</span></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">toaster的目标名称</td>
</tr>
<tr role="row" data-pk="aria-live" class="" id="__BVID__2016__row_aria-live">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-live</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class=""> 当呈现的元素是aria活动区域（对于屏幕阅读器用户）时，设置为'polite'或'assertive'</td>
</tr>
<tr role="row" data-pk="aria-atomic" class="" id="__BVID__2016__row_aria-atomic">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-atomic</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">当屏幕阅读器应读出全部内容（设置为字符串“true”）或仅读出更改（设置为字符串“false”）。大多数情况下留空</td>
</tr>
<tr role="row" data-pk="role" class="" id="__BVID__2016__row_role">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">role</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将ARIA属性“role”设置为特定值</td>
</tr>
</tbody>
</table>
</div>
</article>
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/toast#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2031">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-toast&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BToast</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-toaster&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BToaster</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-toast'</span>, BToast)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/toast#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__2042">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">ToastPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p>此插件还自动包含以下插件：</p>
<ul>
<li><code translate="translate" class="notranslate">BVToastPlugin</code></li>
</ul>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { ToastPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(ToastPlugin)</pre></figure>









</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
